<template>
	<view>
		<view class="navs" :style="'padding-top:'+systemBarHeight+'rpx;background-color:'+ bg" v-if="!titleBg" :class="scroll>20?'bgWhite':''">
			<view class="heade" :style="{backgroundColor:'#fff'}">
				<image :src="img" :style="{width:'32rpx',height:'32rpx'}" @click="skipFn" v-if="back"></image>
				<text></text>
				<text class="title text-ellipsis" :style="'font-size:'+ fontSize+'rpx;color:#2b2b2b;'">{{title}}</text>
				<image 	:src="icon" 
						v-if="icon" 
						:style="'width:'+iconWhite+'rpx;height:'+(iconHeight?iconHeight:iconWhite)+'rpx'"
						@click="msgFn"
				></image>
				<view 	class="msg-view"
						v-show="msgShow" 
						@click="msgFn" 
						:style="'background-color:'+msgBg+';font-size:'+msgSize+'rpx;'"
				>
					<text>
						{{msg}}
					</text>
				</view> 
				<block v-if="msg=='push'">
					<view @click="msgFn" class="flex rounded-30" :style="{background:'linear-gradient(95deg, #E23535 0%, #FF8282 100%)',padding:'15rpx 30rpx'}">
						<text class="font-20 cl-ff">发布</text>
					</view>
				</block>
				<view v-else class="msg-view" @click="msgFn">
					<image :style="{width:'32rpx',height:'32rpx'}" src="../../static/videoDetail/share.png" mode=""></image>
				</view>
				<!-- <view 	class="msg-view"
						v-if="ifMsg"
						@click="msgFn" 
						:style="'background-color:'+msgBg+';font-size:'+msgSize+'rpx;'"
				>
					<text>
						{{msg}}
					</text>
				</view> -->
				<!-- <text v-if="msgTextShow" :class="msgText == '提现明细'?'msgText1':'msgText'" @click="msgFn">
					{{msgText}}
				</text> -->
			</view>
		</view>
		<view class="navs" v-else :style="'padding-top:'+systemBarHeight+'rpx;background:url('+titleBg+') no-repeat;background-size:cover;'" :class="scroll>20?'bgWhite':''">
			<view class="heade">
				<image :src="img" class="icon" @click="skipFn" v-if="back"></image>
				<text></text>
				<text class="title" :style="'font-size:'+ fontSize+'rpx;color:'+color+';'">{{title}}</text>
				<image 	:src="icon" 
						v-if="icon" 
						:style="'width:'+iconWhite+'rpx;height:'+(iconHeight?iconHeight:iconWhite)+'rpx'"
						@click="msgFn"
				></image>
				<view 	class="msg-view"
						v-else v-show="msgShow" 
						@click="msgFn" 
						:style="'background-color:'+msgBg+';font-size:'+msgSize+'rpx;'"
				>
					<text>
						{{msg}}
					</text>
				</view> 
				<view 	class="msg-view"
						v-if="ifMsg"
						@click="msgFn" 
						:style="'background-color:'+msgBg+';font-size:'+msgSize+'rpx;'"
				>
					<text>
						{{msg}}
					</text>
				</view> 
			</view>
		</view>
		<view :style="'height:'+ (systemBarHeight  + 86) +'rpx;'" v-if="heightShow"></view>
	</view>
</template>

<script>
	export default {
		props:{
			img:{
				type:String,
				default:'/static/videoDetail/left.png'
			},
			title:{
				type:String,
				default:"标题"
			},
			//是否显示右边字符
			msgTextShow:{
				type:Boolean,
				default:false
			},
			//右边字符
			msgText:{
				type:String,
				default:''
			},
			msg:{
				type:String,
				default:'管理'
			},
			fontSize:{
				type:[String,Number],
				default:'32',
			},
			color:{
				type:String,
				default:"#2A2D2F"
			},
			bg:{
				type:String,
				default:'transpent',
			},
			scroll:{
				type:[Number,String],
				default:"0"
			},
			backI:{
				type:[String,Number],
				default:0
			},
			msgShow:{//是否显示有边按钮
				type:Boolean,
				default:false,
			},
			msgBg:{//右边按钮颜色
				type:String,
				default:'#F28C0F'
			},
			msgSize:{//右边字体大小
				type:[String,Number],
				default:'30'
			},
			heightShow:{
				type:Boolean,
				default:true
			},
			back:{
				type:Boolean,
				default:true
			},
			icon:{
				type:String
			},
			iconWhite:{
				type:[String,Number],
				default:'44'
			},
			iconHeight:{//不填默认和高度一样
				type:[String,Number]
			},
			ifMsg:{
				type:Boolean,
				default:false
			},
			titleBg:{
				type:String,
				default:''
			}
		},
		data(){
			return{
				systemBarHeight:0,
			}
		},
		created() {
			//#ifdef APP-PLUS
				this.systemBarHeight = plus.navigator.getStatusbarHeight() * 2; //状态栏高度
			//#endif
		},
		methods:{
			skipFn(){
				if(this.backI){
					this.$emit('skipFn')
				}else{
					uni.navigateBack()
				}
				
			},
			msgFn(){
				this.$emit('msgFn')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navs{
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1000;
		box-sizing: border-box;
		background-color: #fff;
		.heade{
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 34rpx;
			box-sizing: border-box;
			.title{
				display: inline-block;
				width:65%;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-family: PingFang SC;
				font-weight: 600;
				text-align: center;
			}
		}
	}
	.bgWhite{
		background-color: #fff;
	
	}
	.icon{
		width: 44rpx;
		height: 44rpx;
	}
	.msg-view{
		padding: 5rpx 27rpx;
		color: white;
		border-radius: 34rpx;
	}
	.msgText{
		font-size: 26rpx;
		color: rgba(0,0,0,0.8);
	}
	.msgText1{
	    font-size: 12px;
	    color: #fff;
	    line-height: 12px;
	    padding: 5px 8px;
	    background-color: #fd9162;
	    border-radius: 12px;
	}
</style>
